import React, { Component } from "react";
import { Modal } from "antd-mobile";
import yhTools from "../../tools/yh";
import iconClose from "../../images/icon-open-account-close.png";
import { InterfaceG } from "../../config/Config";
import "./setPwdModal.scss";
const showMsgOnce = "设置支付密码";
const showMsgTwice = "确认支付密码";
// 较弱密码列表
const SimplePwd = [
	"111111",
	"222222",
	"333333",
	"444444",
	"555555",
	"666666",
	"777777",
	"888888",
	"999999",
	"000000"
];
const SimplePwdOther = "0123456789";
const SimplePwdStr = "9876543210";
/**
 * 设置密码弹窗组件
 */
class setPwdModal extends Component {
	constructor(props) {
		super(props);
		this.state = {
			modal2: true,
			showMsg: showMsgOnce,
			inputTextArray: [], // 输入数组
			pwdOnce: "", // 第一次支付密码
			pwdTwice: "", // 第二次输入支付密码
			tips: ""
		};
	}
	/**
	 * 键盘点击事件
	 * @param {} number
	 */
	handlerKeyBoard(number) {
		let _tempInpArray = this.state.inputTextArray;
		if (number == "X") {
			// 删除
			if (_tempInpArray.length > 0) {
				_tempInpArray.pop();
			} else {
				return;
			}
		} else if (_tempInpArray.length < 6) {
			_tempInpArray.push(number + "");
		} else {
			return;
		}
		this.inputPwd(_tempInpArray);
	}

	/**
	 * 设置密码
	 *
	 * @param {*} pArray
	 */
	inputPwd(pArray) {
		if (pArray.length == 6) {
			// 判断输入次数
			if (this.state.pwdOnce == "") {
				// 第一次输入
				let _tempPwd = pArray.join("");
				if (this.checkSimplePwd(_tempPwd)) {
					this.setState({
						pwdOnce: "",
						pwdTwice: "",
						inputTextArray: [],
						showMsg: showMsgOnce,
						tips: "密码过于简单"
					});
				} else {
					this.setState({
						pwdOnce: _tempPwd,
						inputTextArray: [],
						showMsg: showMsgTwice
					});
				}
			} else {
				// 第二次输入
				let _tempPwd = pArray.join("");
				if (this.state.pwdOnce == _tempPwd) {
					// 两次输入密码匹配
					this.setState({
						pwdTwice: _tempPwd,
						inputTextArray: pArray
					});
					this.submit();
				} else {
					this.setState({
						pwdOnce: "",
						pwdTwice: "",
						inputTextArray: [],
						showMsg: showMsgOnce,
						tips: "两次密码不一致"
					});
				}
			}
		} else {
			this.setState({
				inputTextArray: pArray,
				tips: ""
			});
		}
	}

	// 筛查简单的密码设置
	checkSimplePwd(e) {
		console.log(e);
		if (
			SimplePwd.indexOf(e) > -1 ||
			SimplePwdOther.indexOf(e) > -1 ||
			SimplePwdStr.indexOf(e) > -1
		) {
			return true;
		} else {
			return false;
		}
	}

	// 提交
	submit() {
		const _this = this;
		let objs = {
			url: InterfaceG.setPwd,
			params: {
				// mobilePhone: this.state.phone,
				tradePwd: this.state.pwdOnce
			},
			_alertShow: false
		};
		yhTools.request(objs).then(resp => {
			if (resp.code == "0") {
				_this.props.setPwdSuccessCallback();
			} else {
				_this.setState({
					pwdOnce: "",
					pwdTwice: "",
					inputTextArray: [],
					showMsg: showMsgOnce,
					tips: resp.message
				});
			}
		});
	}

	close() {
		this.props.closeModalCallback();
	}

	render() {
		const { showSetPwdModal } = this.props;
		return (
			<div className="setPwdModal">
				<Modal popup visible={showSetPwdModal} animationType="slide-up">
					<div className="setPayPasswordModal">
						<div className="showMsg">
							{this.state.showMsg}{" "}
							<img
								onClick={this.close.bind(this)}
								className="iconClose"
								src={iconClose}
							/>
						</div>
						<div className="flex_center input_box">
							<div className="box flex_center">
								{this.state.inputTextArray[0] && <div className="point"></div>}
							</div>
							<div className="box flex_center">
								{this.state.inputTextArray[1] && <div className="point"></div>}
							</div>
							<div className="box flex_center">
								{this.state.inputTextArray[2] && <div className="point"></div>}
							</div>
							<div className="box flex_center">
								{this.state.inputTextArray[3] && <div className="point"></div>}
							</div>
							<div className="box flex_center">
								{this.state.inputTextArray[4] && <div className="point"></div>}
							</div>
							<div className="box flex_center">
								{this.state.inputTextArray[5] && <div className="point"></div>}
							</div>
						</div>
						<div className="warnMsg">{this.state.tips}</div>

						<div className="custkeyboard">
							<div className="cell_line"></div>
							<div className="cell">
								<div
									className="row"
									onClick={this.handlerKeyBoard.bind(this, 1)}
								>
									1
								</div>
								<div className="row_line"></div>
								<div
									className="row"
									onClick={this.handlerKeyBoard.bind(this, 2)}
								>
									2
								</div>
								<div className="row_line"></div>
								<div
									className="row"
									onClick={this.handlerKeyBoard.bind(this, 3)}
								>
									3
								</div>
							</div>
							<div className="cell_line"></div>
							<div className="cell">
								<div
									className="row"
									onClick={this.handlerKeyBoard.bind(this, 4)}
								>
									4
								</div>
								<div className="row_line"></div>
								<div
									className="row"
									onClick={this.handlerKeyBoard.bind(this, 5)}
								>
									5
								</div>
								<div className="row_line"></div>
								<div
									className="row"
									onClick={this.handlerKeyBoard.bind(this, 6)}
								>
									6
								</div>
							</div>
							<div className="cell_line"></div>
							<div className="cell">
								<div
									className="row"
									onClick={this.handlerKeyBoard.bind(this, 7)}
								>
									7
								</div>
								<div className="row_line"></div>
								<div
									className="row"
									onClick={this.handlerKeyBoard.bind(this, 8)}
								>
									8
								</div>
								<div className="row_line"></div>
								<div
									className="row"
									onClick={this.handlerKeyBoard.bind(this, 9)}
								>
									9
								</div>
							</div>
							<div className="cell_line"></div>
							<div className="cell">
								<div className="row" id="-"></div>
								<div className="row_line"></div>
								<div
									className="row"
									onClick={this.handlerKeyBoard.bind(this, 0)}
								>
									0
								</div>
								<div className="row_line"></div>
								<div
									className="row"
									onClick={this.handlerKeyBoard.bind(this, "X")}
								>
									X
								</div>
							</div>
						</div>
					</div>
				</Modal>
			</div>
		);
	}
}
export default setPwdModal;
